<template>
    <el-dialog v-model="visible" title="修改床位使用结束时间" width="35%" :close-on-click-modal="false" class="edit-endtime-dialog"
        draggable>
        <div class="form-block">
            <el-form :model="form" label-width="100px" style="width:100%;">
                <el-form-item label="客户姓名">
                    <el-input v-model="form.clientName" disabled style="width:100%;" />
                </el-form-item>
                <el-form-item label="入住日期">
                    <el-input v-model="form.checkinDate" disabled style="width:100%;" />
                </el-form-item>
                <el-form-item label="结束日期">
                    <el-date-picker v-model="form.endDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择结束日期"
                        style="width:100%;" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="onSubmit" style="width:38%;margin-left:6%;">保存</el-button>
                <el-button @click="visible = false" style="width:38%;">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { ref, defineExpose, defineEmits } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'


const visible = ref(false)
const form = ref({
    usageId: '',      // 主键
    clientName: '',   // 展示
    checkinDate: '',  // 展示（即 bedUsage.startDate）
    endDate: ''       // 需要提交
})
const emit = defineEmits(['refresh'])

const open = (row) => {
    form.value.usageId = row.bedUsage.usageId
    form.value.clientName = row.client.name
    form.value.checkinDate = row.bedUsage.startDate
    form.value.endDate = row.bedUsage.endDate
    visible.value = true
}

const onSubmit = async () => {
    if (!form.value.endDate) {
        ElMessage.warning('请选择结束日期')
        return
    }
    try {
        const { data } = await axios.post('http://localhost:9000/bedUsage/updateET', {
            usageId: form.value.usageId,
            endDate: form.value.endDate
        })
        if (data.status === 200) {
            ElMessage.success('保存成功')
            visible.value = false
            emit('refresh')
        } else {
            ElMessage.error(data.msg || '保存失败')
        }
    } catch {
        ElMessage.error('请求失败')
    }
}

defineExpose({ open })
</script>
  
<style scoped>
.edit-endtime-dialog .form-block {
    width: 100%;
    margin: 0 auto;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 6%;
}
</style>
  